import React, { Component } from "react";

import "../../detailSongList/detailSongList.css"

import { djDetails, djProgram } from "../../../api"

import { withRouter } from "react-router-dom"





// import React, { Component } from "react";

// import "./DjDetails.css"
// import '../../detailSongList/detailSongList.css'
// import { withRouter } from "react-router-dom"
// import { djDetails, djProgram } from '../../../api'

class DjDetails extends Component {
    constructor() {
        super()
    }

    back() {
        this.props.history.go(-1)
    }
    timestampToTime(timestamp) {
        var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        var D = date.getDate() + ' ';
        // h = date.getHours() + ':';
        // m = date.getMinutes() + ':';
        // s = date.getSeconds();
        return Y + M + D;
    }
    //跳转播放
    play(id){
        this.props.history.push({pathname:"/ ",state : { id :id}});
    }
    state = {
        id: '',
        rcmdText: '',
        picUrl: '',
        shareCount: '',
        avatarUrl: '',
        nickname: '',
        name: '',
        description: '',
        category: '',
        subCount: '',
        commentCount: '',
        programs: [{
            mainSong: { name: "观复嘟嘟（第一季第82期）：沧海新丝路", id: 521307885 }, listenerCount: 710550, createTime: 1511855511815, likedCount: 141, duration: 1790119 
        }]

    }
    componentDidMount() {
        let rid = this.props.match.params.id
        djDetails(rid, djProgram).then(res => {
            console.log(res)
            if (res.status === 200) {
                console.log(res)
                let data = res.data.djRadio
                this.setState({  commentCount: data.commentCount,id: data.id, rcmdText: data.rcmdText, picUrl: data.picUrl, shareCount: data.shareCount, avatarUrl: data.dj.avatarUrl, nickname: data.nickname, name: data.name, description: data.description, category: data.category, subCount: data.subCount })
            }
            djProgram(this.state.id)
                .then(res => {
                    // console.log(res)
                    this.setState({ programs: res.data.programs })
                })

        })

    }
    render() {
        var bg = this.state.picUrl

        return (
            <div className="detailSongList" style={{ background: bg, backgroundSize: "120%,120%" }}>
                <div className="detailHeader">
                    <div className="headerLeft">
                        <span className="iconfont back" onClick={this.back.bind(this)}>&#xe749;</span>
                    </div>
                    <div className="headerMain">
                        <span>歌单</span>
                    </div>
                    <div className="headerRight">

                        <span className="iconfont right">&#xe7bc;</span>
                    </div>
                </div>

                <div className="detailConent">
                    <div className="detailConentTop">
                        <div className="detailImgWrap">
                            <img src={this.state.picUrl} />
                        </div>
                        <div className="topContent">
                            <h2>{this.state.name}</h2>
                            <div className="authorInfo">
                                <div className="authorImg">
                                    <img src={this.state.avatarUrl} />
                                </div>
                                <div className="authorName">
                                    <span>{this.state.nickname}</span>
                                </div>
                            </div>
                            <div className="introduce">
                                <span className="introduceInner">
                                    {this.state.description}</span>
                            </div>
                        </div>

                    </div>
                    <div className="btn">
                        <div className="first">
                            <span className="iconfont remark">&#xe610;</span>
                            <i>{this.state.commentCount}</i>
                        </div>
                        <div className="second">
                            <span className="iconfont share">&#xe621;</span>
                            <i>{this.state.shareCount}</i>
                        </div>
                        <div className="third">
                            <span className="iconfont download">&#xe730;</span>
                            <i>下载</i>
                        </div>
                        <div className="fouth">
                            <span className="iconfont allcheck">&#xe80d;</span>
                            <i>多选</i>
                        </div>
                    </div>
                </div>

                <div className="detailSong">
                    <div className="detailTitle">
                        <div className="titleLeft">
                            <span className="iconfont broadCastAll">&#xe662;</span>
                            <b>播放全部</b>
                            {/* <i>(共{this.state.trackCount}首)</i> */}
                        </div>
                        <div className="titleRight">

                            <span className="iconfont addIcon">  &#xe62e;</span>
                            {/* <u>收藏({this.state.subscribedCount})</u> */}
                        </div>
                    </div>
                    <div className="detailSongMain">

                        {this.state.programs.map((item, index) => {
                            console.log(item)
                            let id = item.mainSong.id
                            return (
                                <li key={index} onClick={()=>{
                                    this.props.history.push({pathname:"/BroadCast ",state : { id :id}});
                                    console.log(this.props.history)
                                }}>
                                    <i>{index + 1}</i>

                                    <div className="info">
                                        <h2>{item.name}</h2>
                                        <div className="infoInner">
                                            <div className="name">{item.nickname}</div>
                                            {/* <span>-</span> */}
                                            {/* <div className="songName">{item.mainSong.name}</div> */}
                                        </div>
                                    </div>
                                    <div className="detailSongRight">
                                        <span className="iconfont BroadCastIcon">&#xe662;</span>
                                    </div>
                                </li>
                            )
                        })}

                    </div>
                </div>

            </div>
        )
    }
}
export default withRouter(DjDetails)
